<template>
	<!-- 弹性容器 -->
	<view class="content">
		<!-- f1:顶部的图片和用户头像 -->
		<!-- f2:互动消息列表-->
		<uni-list>
			<uni-list-item v-for="(msg,i) in msgList" :key="i">
				<!-- 定制列表项的左侧头部————用户头像 -->
				<template v-slot:header>
					<view class="msg-header">
						<image :src="base + msg.avatar" mode="widthFix"></image>
					</view>
				</template>
				<!-- 定制列表项的中部主体————消息详情 -->
				<template v-slot:body>
					<view class="msg-body">
						<view class="uname">{{msg.uname}}</view>
						<view class="content">{{msg.content}}</view>
						<view class="pic-list">
							<image v-for="(pic,i) in msg.picList" :src="base + pic.url" mode="aspectFill"></image>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- <text>{{msgList}}</text> -->
		<!-- F3:页面底部“上拉加载更多/加载中/没有更多数据了”提示-->
		<uni-load-more :status="isLoading?'loading':(pageNum<pageCount ? 'more':'noMore')"></uni-load-more>
		<!-- <uni-load-more status="loading"></uni-load-more> -->
		<!-- <uni-load-more status="noMore"></uni-load-more> -->
		<!-- 公式：（背）
		 十一、移动端项目中“列表页”编写的固定思路一 作为公式背下来
		 三个功能:
		 ①页面加载时显示第一页数据
		 ②页面滚动到底部时继续加载下一页，前面的内容要保留，最新内容追加在后面
		 ③页面顶部下拉刷新，删除已加载的所有数据，重新加载第一页
		 五个变量:
		 ①kw:要显示的数据包含的关键字;如果没有则默认显示全部数据  keyword
		 ②dataList:加载到的所有的记录集合
		 ③pageCount:符合条件的记录的总页数
		 ④pageNum:当前加载到哪- -页数据了 ，即页号
		 ⑤isLoading:当前是否正在加载数据
		 一个方法三处调用:
		 loadNextPageData():加载下一页数据  需要在第三种情形下调用
		 ①onLoad() // 页面加载时
		 ②onReachBottom() //上拉触底事件，滚动到底部，加载中请稍后
		 ③onPullDownRefresh()  // 顶部下拉刷新，生命周期方法 -->
	</view>
</template>

<script>
	import {
		chatQuery,
		base
	} from '../../service'
	export default {
		data() {
			return {
				// “列表页”必须的五个变量
				base,
				keyword: '', //待查询的数据记录必须包含的关键字
				msgList: [], //已查询到的邻里互动消息列表
				pageCount: 9999, //满足条件的记录总页数，注意此处的初始值没有使用零0，查询的总页数
				pageNum: 0, //当前加载到哪一页数据了，注意此处的初始值为0
				isLoading: false, //当前是否正在加载数据   防抖
			}
		},
		// 生命周期方法
		onLoad() { //页面加载时
			//“加载下一-页数据”调用情形1:页面加载时
			this.loadNextPageData()
		},
		// 生命周期方法页面滚动到底部
		onReachBottom() {
			// 安全阈值
			console.log('页面滚动到底了');
			//“加载下一-页数据"方法调用情形2页面滚动到底了
			this.loadNextPageData()
		},
		// 生命周期方法————页面在顶部下拉刷新了
		onPullDownRefresh() {
			// 顶部下拉刷新
			console.log('下拉刷新了');
			// 清除目前加载的所有数据————既数据变量恢复为初始值
			this.msgList = [] //删除已经加载的所有记录
			this.pageCount = 99999 //重置总页数
			this.pageNum = 0 //当前加载到的页号重置为零
			//“加载下一页数据”方法调用情形3 :顶部下拉刷新
			this.loadNextPageData()
		},
		methods: {
			// “列表页”必须的一个方法：加载下一页数据
			async loadNextPageData() {
				//1、如果当前正在加载中 或者 已经没有更多数据可加载  则退出
				if (this.isLoading || this.pageNum >= this.pageCount) {
					return
				}
				//2、设置“当前正在加载中”为真
				this.isLoading = true
				//3、异步请求服务器端数据，把新得到的数据追加到已有数据的尾部
				let {
					pageCount,
					pageNum,
					pageSize,
					recordCount,
					data
				} = await chatQuery(this.pageNum + 1)
				this.pageCount = pageCount //获得真实的 "总页数"
				this.pageNum = pageNum //获得修改后的"当前页号"
				// this.msgList = data //获得查询后的总数据 追加到数组的尾部
				// console.log('data', data);
				// this.msgList.push(...data)
				this.msgList = [...this.msgList, ...data] // 获得查询到的数据一 新数据拼接在已有的数据后面
				// this.msgList = this.msgList.concat(data)  concat拼接
				// console.log('this.msgList', this.msgList);

				uni.stopPullDownRefresh() //停止下拉刷新的动画图标
				// 隐藏下拉刷新图标动画
				//4、设置“当前正在加载中”为假  互斥锁
				this.isLoading = false
			},
		}
	}
</script>

<style scoped lang="scss">
	.msg-header {
		image {
			width: 90rpx;
		}
	}

	.msg-body {
		flex-direction: column;

		.pic-list {
			image {
				width: 180rpx;
				height: 150rpx;
				border: 1px solid $uni-border-color;
				margin-right: $uni-spacing-row-sm;
			}
		}
	}
</style>
